<template>
  <div>
    <el-tree :data="tree"
             :props="defaultProps"
             node-key="id"
             :default-expand-all="true"
             :expand-on-click-node="false"
             :render-content="renderContent">
    </el-tree>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import notify from '@/tools/notify'
  import { trim } from 'lodash'

  export default {
    data () {
      return {
        defaultProps: {
          children: '_child',
          label: 'name'
        }
      }
    },
    computed: {
      ...mapState({
        tree: state => state.recommend.recommendTree,
        goodData: state => state.goodsclass.saveData
      })
    },
    created () {
      this.recommendTree()
    },
    methods: {
      // 获取推荐位树
      async recommendTree () {
        let payload = {
          id: 0
        }
        await this.$store.dispatch('recommend/recommendTree', payload)
      },
      renderContent (createElement, {node, data, store}) {
        const self = this
        if (!data._child) {
          if (String(self.goodData.recommend).indexOf(String(data.action)) >= 0) {
            return createElement('span', {
              attrs: {
                style: 'white-space: normal; width: 100%'
              }
            }, [
              createElement('span', node.label),
              createElement('span', {
                attrs: {
                  style: 'float: right; margin-right: 20px'
                }
              }, [
                createElement('el-button', {
                  attrs: {
                    size: 'mini',
                    type: 'danger'
                  },
                  on: {
                    click: function () {
                      if (String(self.goodData.recommend).indexOf(String(data.action)) >= 0) {
                        let reg = new RegExp(String(data.action), 'g')
                        let a = self.goodData.recommend.replace(reg, '')
                        if (String(a).indexOf(',,') >= 0) {
                          let reg = new RegExp(',,', 'g')
                          let b = a.replace(reg, ',')
                          self.goodData.recommend = b
                        } else {
                          self.goodData.recommend = a
                        }
                        self.goodData.recommend = trim(self.goodData.recommend, ',')
                      } else {
                        self.$message({
                          message: '商品未在该推荐位下',
                          type: 'error'
                        })
                        return false
                      }
                      let payload = {
                        id: self.goodData.id,
                        recommend: self.goodData.recommend
                      }
                      self.$store.dispatch('recommend/recommendClass', payload).then(res => {
                        self.recommendTree()
                        notify.success('推荐已取消')
                      })
                    }
                  }
                }, '取消')
              ]),
              createElement('span', {
                attrs: {
                  style: 'float: right; margin-right: 30px'
                }
              }, [createElement('span', '已推荐')])
            ])
          } else {
            return createElement('span', {
              attrs: {
                style: 'white-space: normal; width: 100%'
              }
            }, [
              createElement('span', node.label),
              createElement('span', {
                attrs: {
                  style: 'float: right; margin-right: 20px'
                }
              }, [
                createElement('el-button', {
                  attrs: {
                    size: 'mini',
                    type: 'success'
                  },
                  on: {
                    click: function () {
                      if (self.goodData.recommend) {
                        if (String(self.goodData.recommend).indexOf(String(data.action)) >= 0) {
                          self.$message({
                            message: '商品已在该推荐位下',
                            type: 'error'
                          })
                          return false
                        } else {
                          let reg = new RegExp(String(data.action), 'g')
                          let a = self.goodData.recommend.replace(reg, '')
                          if (String(a).indexOf(',,') >= 0) {
                            let reg = new RegExp(',,', 'g')
                            let b = a.replace(reg, ',')
                            self.goodData.recommend = b
                          } else {
                            self.goodData.recommend = a
                          }
                          self.goodData.recommend = self.goodData.recommend + data.action
                        }
                      } else {
                        self.goodData.recommend = data.action
                      }
                      let payload = {
                        id: self.goodData.id,
                        recommend: self.goodData.recommend
                      }
                      self.$store.dispatch('recommend/recommendClass', payload).then(res => {
                        self.recommendTree()
                        notify.success(res.msg)
                      })
                    }
                  }
                }, '推荐')
              ]),
              createElement('span', {
                attrs: {
                  style: 'float: right; margin-right: 30px'
                }
              }, [createElement('span', '未推荐')])
            ])
          }
        } else {
          return createElement('span', {
            attrs: {
              style: 'white-space: normal'
            }
          }, [createElement('span', node.label)])
        }
      }
    }
  }
</script>
